<template>
	<view class="pointsMall">
		<!-- 用户信息 -->
		<view class="userInfo flex-r-a-c" style="background-image: url(../../static/mine/jfscbj.png);">
			<image :src="integralData.userimg" mode=""></image>
			<view class="userInfo_r flex-r-s-c">
				<view class="userInfo_r_t flex-r-b-c">
					<view class="name">{{integralData.nickname}}</view>
					<view class="record" @tap.stop="goExchangeList">积分记录</view>
				</view>
				<view class="userInfo_r_b flex-r-b-c">
					<view class="integral">积分：{{integralData.integral}}</view>
					<view class="rule"  @tap="isIntegralPopup = true">积分规则</view>
				</view>
			</view>
		</view>
		<!-- 搜索框 -->
<!-- 		<view class="search_box">
			<u-search v-model="searchInput" input-align="center" :show-action="false" placeholder="搜索" shape="square"
				bg-color="#FFF" height="80" @search="page = 1;searchBtn()" @blur="page = 1;searchBtn()"></u-search>
		</view> -->
		<view class="search_box">
			<view v-if="isSearchInput" class="inputBox flex-r-c-c" style="width: 100%; height: 100%; background-color: #FFFFFF; border-radius: 12rpx;" @tap="isSearchInput = false">
				<image src="../../../static/mine/ssfdj.png" style="width: 28rpx; height: 28rpx;" mode="widthFix"></image>
				<view style="color: #999999; font-size: 24rpx; font-weight: 500; letter-spacing: 8rpx; margin-left: 10rpx;">搜索</view>
			</view>
			<u-search v-else v-model="searchInput" :focus="isSearchInput == false ? 'true' : 'false' " :show-action="false" placeholder="搜索" shape="square"
				bg-color="#FFF" height="80" @search="page = 1;searchBtn()" @blur="page = 1;searchBtn()"></u-search>
		</view>
		
		
		<!-- 列表 -->
		<view class="commodity_box">
			<view class="list flex-r-a-c" v-for="(item,index) in integralList" :key="index">
				<image :src="item.image" mode=""></image>
				<view class="list_f">
					<view class="name">{{item.name}}</view>
					<view class="list_f_b flex-r-b-c">
						<view class="integral">{{item.points}}<text>积分</text></view>
						<view class="btn" @tap.stop="goIntegralConfirm(item.id)">点击兑换</view>
					</view>
				</view>
			</view>
			<view class="text" style="width: 100%; text-align: center; font-size: 32rpx; font-weight: bold;">{{titleText}}</view>
		</view>
		<!-- 积分规则弹框 -->
		<u-popup v-model="isIntegralPopup" mode="bottom" height="auto" border-radius="30">
			<view class="popup_box">
				<view class="title">积分规则说明</view>
				<view class="_titles">使用须知：</view>
				<rich-text :nodes="integralData.integral_art"></rich-text>
				<view class="btn" @tap="isIntegralPopup = false">关闭</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1, // 页码
				isIntegralPopup: false, // 积分规则弹框
				integralData: {}, // 积分数据
				integralList: [], // 商品列表
				titleText: '', // 上拉提示
				searchInput: '', // 搜索框文本
				isSearch: true, // 防止多次请求
				isSearchInput: true
			};
		},
		onLoad() {
			this.getIntegralShopList()  // 获取积分商城列表
		},
		onReachBottom() {
			let that = this
			if(that.titleText == ''){ // 防止上拉多次请求
				that.page = that.page+1
				that.searchInput == '' ? that.getIntegralShopList() : that.searchBtn()
			}
		},
		methods:{
			// 获取积分商城列表
			getIntegralShopList(){
				let that = this
				that.$api.integralShop_list({page: that.page}).then(res => {
					that.integralData = res.data.data
					that.titleText = res.data.data.data.length == 0 ? '暂无数据' : ''
					that.integralList = that.integralList.concat(res.data.data.data)
				})
			},
			
			// 点击搜索
			searchBtn(){
				let that = this
				if(that.isSearch){
					that.isSearch = false // 防止多次请求
					if(that.page <= 1){
						that.integralList = []
					}
					that.$api.integralShop_list({
						page: that.page,
						keyword: that.searchInput
					}).then(res => {
						that.titleText = res.data.data.data.length == 0 ? '暂无数据' : ''
						that.integralList = that.integralList.concat(res.data.data.data)
						that.isSearch = true
						that.isSearchInput = true
					})
				}
			},
			
			// 点击跳转兑换历史
			goExchangeList(){
				uni.navigateTo({
					url: '/mine/exchangeList/exchangeList'
				})
			},
			
			// 点击跳转积分订单确认
			goIntegralConfirm(id){
				uni.navigateTo({
					url: '/order/integralConfirm/integralConfirm?id=' + id
				})
			}
			
		}
	}
</script>

<style lang="less">
	.pointsMall{
		width: 90vw;
		margin: 20rpx auto;
		.userInfo{
			width: 100%;
			height: 208rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			.userInfo_r{
				width: 60%;
				flex-wrap: wrap;
				.userInfo_r_t{
					width: 100%;
					.name{
						font-size: 32rpx;
						font-weight: 500;
						color: #292929;
					}
					.record{
						width: 164rpx;
						height: 62rpx;
						line-height: 62rpx;
						text-align: center;
						border: 1px solid #45806E;
						color: #45806E;
						border-radius: 40rpx;
					}
				}
				//
				.userInfo_r_b{
					margin-top: 20rpx;
					width: 100%;
					font-size: 24rpx;
					font-weight: 500;
					color: #888888;
					.rule{
						margin-right: 30rpx;
					}
				}
				//
			}
		}
		//
		.search_box{
			width: 97%;
			height: 80rpx;
			margin: 20rpx auto;
		}
		//
		.commodity_box{
			width: 97%;
			height: auto;
			margin: 20rpx auto;
			box-sizing: border-box;
			padding-bottom: 80rpx;
			.list{
				width: 100%;
				height: auto;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx;
				background-color: #FFFFFF;
				margin-bottom: 20rpx;
				
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
				.list_f{
					width: 50%;
					.name{
						width: 100%;
						color: #666666;
						font-size: 800;
						font-size: 32rpx;
					}
					.list_f_b{
						margin-top: 50rpx;
						.integral{
							font-size: 42rpx;
							color: #FF6C1D;
							font-weight: 500;
							text{
								font-size: 24rpx;
								display: inline-block;
								margin-left: 10rpx;
							}
						}
						.btn{
							width: 146rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							color: #FFAB01;
							border: 1px solid #FFAB01;
							font-size: 24rpx;
							font-weight: 500;
							border-radius: 40rpx;
						}
					}
				}
			}
		}
		//
		.popup_box{
			text-align: center;
			box-sizing: border-box;
			padding: 30rpx;
			.title{
				margin-top: 40rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #5A5A5A;
			}
			._titles{
				margin-top: 40rpx;
				text-align: left;
				color: #FF6C1D;
				font-size: 28rpx;
				font-weight: 500;
			}
			//
			rich-text{
				text-align: left;
				color: #818181;
				font-size: 24rpx;
				font-weight: 500;
			}
			//
			.btn{
				width: 80%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				background-color: #45806E;
				font-size: 28rpx;
				color: #FFFFFF;
				font-weight: 500;
				margin: 40rpx auto;
			}
		}
	}
</style>
